////
/// Components
/// Link
////

.Link {
  color: get-color(purple, light);
  transition: color get-duration() get-easing();

  &:focus,
  &:hover {
    color: get-color(purple);
  }

  &:active {
    color: get-color(purple, dark);
  }
}

///
/// Variants
.Link--typeDark {
  color: get-color(purple);

  &:focus,
  &:hover {
    color: get-color(brand, yellow);
  }

  &:active {
    color: get-color(brand, orange);
  }
}

.Link--typeUnderlined {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  color: get-color(coal, dark);
  text-decoration: underline;
  text-decoration-line: underline;
  text-decoration-skip: ink;

  &:focus,
  &:hover {
    color: get-color(brand, blue);
  }

  &:active {
    color: darken(get-color(brand, blue), 10%);
  }
}

.Link--noWrap {
  white-space: nowrap;
}
